---
title: Ikone
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

A list of icons used throughout our app.

## Tabler Ikone

We use Tabler icons for React throughout the app.

<Tabs>

<Tab title="Installation"><br/>

```
yarn add @tabler/icons-react
```

</Tab>

<Tab title="Props">

U kan elke ikoon as 7n komponent invoer. Here's an example: <br />

```jsx
import { IconArrowLeft } from "@tabler/icons-react";

export const MyComponent = () => {
  return <IconArrowLeft color="red" size={48} />;
};
```

</Tab>

<Tab title="Props">

| Eienskappe | Tipe   | Beskrywing                                    | Standaard    |
| ---------- | ------ | --------------------------------------------- | ------------ |
| grootte    | nommer | Die hoogte en breedte van die ikoon in pixels | 24           |
| kleur      | string | Die kleur van die ikone                       | currentColor |
| slag       | nommer | The stroke width of the icon in pixels        | 2            |

</Tab>

</Tabs>

## Aangepaste Ikone

In addition to Tabler icons, the app also uses some custom icons.

### Ikoon Adresboek

Displays an address book icon.

<Tabs>

<Tab title="Usage">

```jsx
import { IconAddressBook } from 'twenty-ui/display';

export const MyComponent = () => {
  return <IconAddressBook size={24} stroke={2} />;
};
```

</Tab>

<Tab title="Props">

| Eienskappe | Tipe   | Beskrywing                                    | Standaard |
| ---------- | ------ | --------------------------------------------- | --------- |
| grootte    | nommer | Die hoogte en breedte van die ikoon in pixels | 24        |
| slag       | nommer | The stroke width of the icon in pixels        | 2         |

</Tab>

</Tabs>
